<script setup lang="ts">
import { Ref, ref } from 'vue'
import { version } from '@/assets/global.ts'
import BgmSetting from '@/views/action/setting/BgmSetting.vue'
import WallpaperSetting from '@/views/action/setting/WallpaperSetting.vue'
import WallpaperInfo from '@/views/action/setting/WallpaperInfo.vue'

const visible = ref(false)

const settingWallpaper: Ref<'wallpaper' | 'about'> = ref('wallpaper')

function open() {
  visible.value = true
}

function close() {
  visible.value = false
}

function handleOk() {
}

defineExpose({
  visible,
  open,
  close,
})
</script>

<template>
  <a-modal
    wrapClassName="setting-modal"
    v-model:visible="visible"
    :width="662"
    :title="null"
    :footer="null"
    @ok="handleOk"
  >
    <div class="setting-model-wrapper">
      <div class="setting-model-content">
        <div class="setting-model-header">
          <div class="setting-model-title">设置</div>
          <div class="setting-model-version">
            <a-typography-text type="secondary">当前版本：{{ version }}</a-typography-text>
          </div>
          <div class="setting-model-version">
            <a-typography-text type="secondary">作者：流星灯辉</a-typography-text>
          </div>
        </div>
        <img class="bg-info-line" :src="'image/bg-info-line.03872569..png'" alt="">
        <div class="tab-wrap">
          <div
            class="story tab-item btn"
            :class="settingWallpaper === 'wallpaper' ? 'active' : ''"
            @click="settingWallpaper = 'wallpaper'"
          >壁纸设置
          </div>
          <div
            class="battle tab-item btn"
            :class="settingWallpaper === 'about' ? 'active' : ''"
            @click="settingWallpaper = 'about'"
          >关于壁纸
          </div>
        </div>
        <div class="scroll-container" v-custom-scrollbar="{height: '400px'}">
          <div v-if="settingWallpaper === 'wallpaper'">
            <div class="setting-model-text">
              <a-typography-title :level="3">▌ 设置预设壁纸</a-typography-title>
              <WallpaperSetting/>
            </div>
            <div class="setting-model-text">
              <a-typography-title :level="3" class="mt20">▌ 设置背景音乐</a-typography-title>
              <BgmSetting/>
            </div>
          </div>
          <WallpaperInfo v-if="settingWallpaper === 'about'"></WallpaperInfo>
        </div>
        <div class="more-btn" @click="visible = false">确定</div>
      </div>
    </div>
  </a-modal>
</template>

<style>
.setting-modal {
  .ant-modal-content {
    background: transparent;
    box-shadow: none;

    .ant-modal-close {
      display: none;
    }

    .ant-modal-close-x {
      font-size: 32px;
    }
  }

  .ant-modal-body {
    padding: 0;
    background: transparent;
  }
}

.bg-info-line {
  margin: 4px 0;
}

.setting-model-wrapper {
  background: url("/image/bg-info.03872569..png");
  background-size: cover;
  height: 734px;
  padding: 80px 48px 80px;
  overflow: auto;

  &::-webkit-scrollbar {
    display: none;
  }

  .setting-model-content {
    width: 100%;
    height: 100%;
    padding-bottom: 20px;

    &::-webkit-scrollbar {
      display: none;
    }
  }
}

.setting-model-header {
  display: flex;
  font-family: meSubFont, serif;
  align-items: baseline;
  gap: 40px;
  margin-top: -20px;

  .setting-model-title {
    font-size: 4em;
  }
}

.tab-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5px;
  height: 44px;
  font-size: 24px;
  z-index: 5;
  margin-bottom: 20px;
  margin-top: 20px;
  background: url() center/100% no-repeat;
}

.tab-item {
  cursor: pointer;
  width: 50%;
  height: 36px;
  color: #a56b37;
  flex: none;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  transition: all .2s ease;
  text-align: center;
  flex-shrink: 0;
}

.tab-item.active {
  color: #fff;
  background-image: url()
}

.setting-model-text {
  font-size: 16px;
  background-size: 100% auto;
  background: url("/image/bg-text.20049fff..png") no-repeat;
  padding: 12px;

  .ant-radio-wrapper {
    font-size: 16px;
  }

  &::-webkit-scrollbar {
    display: none;
  }
}

.setting-model-text + .setting-model-text {
  margin-top: 40px;
}

.more-btn {
  cursor: pointer;
  position: absolute;
  bottom: 57px;
  right: 50%;
  transform: translateX(50%);
  display: flex;
  justify-content: center;
  align-items: center;
  width: 247px;
  height: 60px;
  color: #232854;
  background-size: 100%;
  background-image: url();
  text-align: center;
  font-size: 24px;
  z-index: 10;
  zoom: 0.8;
}

.more-btn:hover {
  color: #fff;
  background-image: url()
}

.setting-model-footer {
  display: flex;
  align-content: center;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.scroll-container {
  height: 400px;
  position: relative;
}
</style>